<template>
        
    <!--中间部分-->
    <div id="ccenter">
        <div id="carouselExampleFade" class="carousel slide carousel-fade" data-ride="carousel">
            <!--   轮播图部分             -->
            <div class="carousel-inner">
                <div class="carousel-item">
                    <img :src=imgList[current] class="d-block w-100" alt="推送1">
                </div>
            </div>
            
        </div>


        <!-- 下半部分 -->
        <div id="center_bottom">
            <div id="xinshu">
                <p style="line-height: 24px; width: 96%; margin: auto; font-size: 18px; font-weight: 600; display: block;">
                    新书上架
                </p>
            </div>
            <!-- 新书上架轮播 -->
            <div id="carouselExampleCaptions" class="carousel slide" data-ride="carousel">
                
                <div class="carousel-inner">
                    <Card/>
                </div>
                <div>
                    
                </div>
            </div>
        </div>
    </div>
</template>

<script>

import '@/style/css/home.css'
import $ from 'jquery'
import Card from '@/components/card.vue'

export default {
    name:'Main',
    data(){
        return{
            imgList:[require('@/style/images/消息轮播1.jpg'),
                require('@/style/images/消息轮播2.jpg'),
                require('@/style/images/消息轮播3.jpg')
            ], 
            current:0
        };
    },
    components:{
        Card
    },
    mounted(){
        this.default();
    },
    methods:{
        default:function(){
            window.setInterval(this.changeImg,5000)
        },
        changeImg(){
            this.current++;
            if(this.current==3){
                this.current=0;
            }
        }
    }
}
</script>

<style>
    a{
       text-decoration: none;
    }
    li{
       list-style: none;
    }
</style>